<%@ page language="java" contentType="text/html; charset=utf-8"	pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/component/commonTagLib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>物流信息</title>
<%@ include file="/WEB-INF/component/commonCSS.jsp"%>
<!--[if lt IE 9]>
        <script src="lib/js/html5shiv.min.js"></script>
        <script src="lib/js/respond.min.js"></script>
    <![endif]-->
<style type="text/css">
body {
	font-family: "Lucida Grande", Tahoma, Verdana, Lucida, Arial, Helvetica,
		sans-serif, "宋体";
	font-size: 12px;
}

#process {
	margin: 50px;
	padding: 25px 0 80px;
}

#process .node, #process .proce {
	float: left;
	position: relative;
	height: 18px;
	background-image: url(${ctx}/lib/img/bg_state.jpg);
	background-repeat: no-repeat;
}

#process .node.ready {
	width: 13px;
	background-position: -150px 0px;
}

#process .node.doing {
	width: 13px;
	background-position: -150px -60px;
}

#process .node.wait {
	width: 13px;
	background-position: -150px -40px;
}

#process .proce {
	width: 150px;
}

#process .proce.doing {
	background-position: 0 -20px;
	color: #360;
}

#process .proce.wait {
	background-position: 0 -40px;
	color: #360;
}

ul {
	display: inline-block;
	list-style: none;
}

#process ul {
	padding-top: 18px; /*margin-left: -152px;*/
	margin-left: -190px;
	display: inline-block;
	margin-top: 0px;
	position: absolute;
	width: 314px;
	text-align: center;
	list-style: none;
}

#process .proce ul {
	z-index: 5;
	width: 150px;
}

#process .node ul {
	z-index: 1;
	width: 275px;
	margin-left: -125px;
}

#Logistics li {
	padding: 5px 0px;
}

#process .tx2 {
	color: #999;
	line-height: 15px;
	text-align: right;
}

#OrderInfo {
	margin: 5px;
	border: 0px;
	width: 95%;
}

#OrderInfo th {
	background-color: #FFFCEB;
	text-align: right;
	width: 120px;
}

#OrderInfo td {
	text-align: left;
}

#processexplain div {
	float: right;
	height: 18px;
	background-image: url(${ctx}/lib/img/bg_state.jpg);
	background-repeat: no-repeat;
	padding-left: 16px;
	margin-right: 20px;
}
/*增加，否则ie6有问题*/
* html #process .node {
	background-position-x: -150px;
}

* html #process .proce {
	background-position-x: 0;
}

* html #process .wait {
	background-position-y: -40px;
}

* html #process .doing {
	background-position-y: -20px;
}

* html #process .ready {
	background-position-y: 0;
}

* html #process .singular {
	background-position-y: -60px;
}
/*ff*/
#process .node ul {
	z-index: 1;
	width: 200px;
	margin-left: -125px;
}
/* ie8+*/
#process .node ul {
	z-index: 1\9;
	width: 200px\9;
	margin-left: -125px\9;
}
/*ie6 7 特殊处理*/
#process .node ul {
	*z-index: 1;
	*width: 200px;
	*margin-left: -90px;
}
/*google*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
	#process .node ul {
		z-index: 1;
		width: 200px;
		margin-left: -125px;
	}
}
</style>
</head>
<body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">
	



	<section class="content">
	
	<div class="box box-success">
            <div class="box-header with-border">
                <h3 class="box-title">物流号：${form.orderPackId }  ${delCompName==null?"":(delCompName==""?"":"- ")}${delCompName }</h3>
                <div class="box-tools pull-right">
                    <!-- <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> -->
                </div><!-- /.box-tools -->
            </div><!-- /.box-header -->
            <div class="box-body mchart">
                <div id="process">
                
				<div id="node1"  class="node ${form.joinStatus }">
					<ul>
						<li class="tx1">制定计划</li>
						<li class="tx2">${form.joinPlanTime }</li>
					</ul>
				</div>
				<div id="proce1" class="proce ${form.joinStatus }"></div>
				<div id="node2" class="node ${form.subStatus }">
					<ul>
						<li class="tx1">提交时间</li>
						<li class="tx2">${form.submitDatetime }</li>
					</ul>
				</div>
				<div id="proce2" class="proce ${form.subStatus }"></div>
				<div id="node3" class="node ${form.confirmStatus }">
					<ul>
						<li class="tx1">企业确认</li>
						<li class="tx2">${form.orderConfirmTime }</li>
					</ul>
				</div>
				<div id="proce3" class="proce ${form.confirmStatus }"></div>
				<div id="node4" class="node ${form.delStatus }">
					<ul>
						<li class="tx1">出库</li>
						<li class="tx2">${form.delDatetime }</li>
					</ul>
				</div>
				<div id="proce4" class="proce ${form.delStatus }"></div>
				<div id="node5" class="node ${form.recpStatus }">
					<ul>
						<li class="tx1">收货</li>
						<li class="tx2">${form.recpDatetime }</li>
					</ul>
				</div>


			</div>
			<div id="processexplain">
				<div style="background-position: -150px -40px">订单未到达节点</div>
				<div style="background-position: -150px -60px">订单当前所处节点</div>
				<div style="background-position: -150px 0px;">订单已通过节点</div>
			</div>
        </div>
     </div>   
        
          
       <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">订单追踪</h3>
                <div class="box-tools pull-right">
                    <!-- <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button> -->
                </div><!-- /.box-tools -->
            </div><!-- /.box-header -->
            <div id="Logistics">
                 
                <ul>
                <c:forEach items="${rows }" var="list">
                	<li>${list }</li>
                </c:forEach>
                </ul> 
                <div style="margin: 8px; padding-left: 10px; color: Red; display: none;">
                    上述信息红色字体部分物流信息由配送企业:<span id="CompanyName_PS1"></span>提供，如有疑问请与配送企业或平台联系！</div>
            </div>
        </div>
      

	<table class="jqgrid" id="gridlist"></table>
	<div id="gridpage"></div>
        
</section>
	<%@ include file="/WEB-INF/component/commonJS.jsp"%>
	<script type="text/javascript" src="${ctx }/lib/js/JOrderInfo.js"></script>
	<script type="text/javascript">
		$(function() {
			
			$("#gridlist").jqGrid({
					
				url: "${ctx}/purOrderInfo/getHospOderOldDetail.html?orderPackId=${param.orderPackId}",
				mtype: "POST",
				datatype: "json",
				autowidth: true,
				shrinkToFit: false,
				height: 270,
				colNames: ['','','订单包号','采购价','采购数量','采购金额','配送数量','配送金额','药品编码', '通用名', '剂型', '规格','转换系数','包装单位','材质','生产企业','采购限价','商品编码','所属项目'],
				colModel: [
					{ name: 'drugId',index:'n1', width:80, hidden:true,align:"center", sortable:false  },  
					{ name: 'orderCode', index: 'ship', hidden:true, width: 80, align: "center", sortable:false },
					{ name: 'orderPackId', index: 'ship', hidden:true, width: 80, align: "center", sortable:false },
					{ name: 'proPrice', index: 'ship', width: 80, align: "right" , sortable:false,
                 	   formatter:function(cellvalue, options, row){
                           return formatAmount(cellvalue, options, row);
                       }},
					{ name: 'proCount', index: 'ship', width: 80, align: "center" , sortable:false },
					{ name: 'buyPrice', index: 'sdate', width: 80, align: "right", sortable:false,
                 	   formatter:function(cellvalue, options, row){
                           return formatAmount(cellvalue, options, row);
                       }},
					{ name: 'delCount', index: 'ship', width: 80, align: "center", sortable:false },
					{ name: 'delPrice', index: 'sdate', width: 80, align: "right", sortable:false,
                 	   formatter:function(cellvalue, options, row){
                           return formatAmount(cellvalue, options, row);
                       }},
					{ name: 'drugCode', index: 'sdate', width: 120, align: "center", sortable:false},
					{ name: 'drugName', index: 'name', width: 100,align:"center", sortable:false },
					{ name: 'formName', index: 'stock', width: 60 , align: "center", sortable:false },
					{ name: 'specName', index: 'ship', width: 60, align: "center", sortable:false  },
					{ name: 'factor', index: 'ship', width: 60, align: "center", sortable:false },
					{ name: 'unit', index: 'ship', width: 70, align: "center", sortable:false },
					{ name: 'materialName', index: 'ship', width: 80, align: "center", sortable:false },
					{ name: 'compName', index: 'ship', width: 150, align: "center" ,  sortable:false},
					{ name: 'proPriceLimit', index: 'ship', width: 80, align: "right" , sortable:false},
					{ name: 'goodsCode', hidden:true, index: 'sdate', width: 80, align: "center", sortable:false},
					{ name: 'projName', index: 'ship',hidden:true, width: 130, align: "center", sortable:false }
				],
				rowNum: 20,
				rowList: [10, 20, 50, 100],
				rownumbers: true,
				pager: "#gridpage",
				//multiselect: true, 
				viewrecords: true,
				caption: "订单详情列表",
				jsonReader: {
					repeatitems: false,
					id: "ids"
				}
			});
			$("#gridlist").jqGrid('navGrid', '#gridpage', { add: false, edit: false, del: false, search: false, refresh: false });
			$(window).trigger("resize");
		});
	</script>
</body>
</html>